<div class="ng-select-container" ng-class="{'disabled': disabled}" ng-click="toggleDropdown($event)">
  <!-- 单选模式 -->
  <div class="ng-select-single" ng-if="!multiple">
    <span class="ng-select-placeholder" ng-if="!selectedItems.length">{{ placeholder }}</span>
    <span class="ng-select-value" ng-if="selectedItems.length">{{ selectedItems[0][labelField] }}</span>
    <span class="ng-select-clear" ng-if="clearable && selectedItems.length && !disabled" ng-click="clearSelection($event)">
      <i class="clear-icon">×</i>
    </span>
    <span class="ng-select-arrow">
      <i class="arrow-icon" ng-class="{'arrow-up': isOpen, 'arrow-down': !isOpen}">▼</i>
    </span>
  </div>

  <!-- 多选模式 -->
  <div class="ng-select-multiple" ng-if="multiple">
    <div class="ng-select-tags">
      <span class="ng-select-tag" ng-repeat="item in selectedItems">
        {{ item[labelField] }}
        <i class="tag-close" ng-if="!disabled" ng-click="removeItem(item, $event)">×</i>
      </span>
      <input
        type="text"
        class="ng-select-search-input"
        ng-model="searchKeyword"
        ng-change="handleSearch()"
        ng-focus="openDropdown()"
        ng-disabled="disabled"
        placeholder="{{ selectedItems.length ? '' : placeholder }}"
      />
    </div>
    <span class="ng-select-clear" ng-if="clearable && selectedItems.length && !disabled" ng-click="clearSelection($event)">
      <i class="clear-icon">×</i>
    </span>
    <span class="ng-select-arrow">
      <i class="arrow-icon" ng-class="{'arrow-up': isOpen, 'arrow-down': !isOpen}">▼</i>
    </span>
  </div>

  <!-- 下拉菜单 -->
  <div class="ng-select-dropdown" ng-show="isOpen">
    <!-- 搜索框 (单选模式) -->
    <div class="ng-select-search" ng-if="searchable && !multiple">
      <input
        type="text"
        class="ng-select-search-input"
        ng-model="searchKeyword"
        ng-change="handleSearch()"
        placeholder="{{ searchPlaceholder || '搜索...' }}"
        ng-click="$event.stopPropagation()"
      />
    </div>

    <!-- 加载中 -->
    <div class="ng-select-loading" ng-if="loading">
      <span class="loading-text">加载中...</span>
    </div>

    <!-- 无数据 -->
    <div class="ng-select-empty" ng-if="!loading && !filteredOptions.length">
      <span class="empty-text">无数据</span>
    </div>

    <!-- 选项列表 -->
    <ul class="ng-select-options" ng-if="!loading && filteredOptions.length">
      <li
        class="ng-select-option"
        ng-repeat="option in filteredOptions track by option[valueField]"
        ng-class="{'selected': isSelected(option), 'disabled': option.disabled}"
        ng-click="selectOption(option, $event)"
      >
        <span class="option-checkbox" ng-if="multiple">
          <i class="checkbox-icon" ng-if="isSelected(option)">✓</i>
        </span>
        <span class="option-label" ng-bind-html="highlightText(option[labelField])"></span>
      </li>
    </ul>
  </div>
</div>
